<template>
  <div style="margin: 15px; margin-right: 30px;">
    <el-form ref="form" :rules="rules" :model="form" label-width="130px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="装货地址" prop="shipperSubdivisionCodeList">
            <el-cascader
              v-model="form.shipperSubdivisionCodeList"
              :options="areaOptions"
              :props="{ value: 'countyCode', label: 'countyName' }"
              clearable
              @change="changeConsignorAreaList"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="装货详细地址" prop="consignorDetailAddress">
            <el-input v-model="form.consignorDetailAddress" placeholder="请输入装货详细地址" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="装货人姓名" prop="consignorName">
            <el-input v-model="form.consignorName" placeholder="请输入装货人姓名" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="装货人电话" prop="consignorPhone">
            <el-input v-model="form.consignorPhone" placeholder="请输入装货人电话" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="收货地址" prop="consigneeSubdivisionCodeList">
            <el-cascader
              v-model="form.consigneeSubdivisionCodeList"
              :options="areaOptions"
              :props="{ value: 'countyCode', label: 'countyName' }"
              clearable
              @change="changeConsigneeAreaList"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="收货详细地址" prop="consigneeDetailAddress">
            <el-input v-model="form.consigneeDetailAddress" placeholder="请输入收货详细地址" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="收货人姓名" prop="consigneeName">
            <el-input v-model="form.consigneeName" placeholder="请输入收货人姓名" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="收货人电话" prop="consigneePhone">
            <el-input v-model="form.consigneePhone" placeholder="请输入收货人电话" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="funcCancel">取 消</el-button>
      <el-button type="primary" @click="funcSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
Vue.use(VXETable);
import { addCommonRouteInfo } from "@/api/shipment";
export default {
  name: "CommonRouteInfoAdd",
  props: {
    areaOptions: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      form: {
        shipperSubdivisionCodeList: [],
        consignorProvinceCode: "",
        consignorCityCode: "",
        consignorCountyCode: "",
        consignorDetailAddress: "",
        consignorName: "",
        consignorPhone: "",
        consigneeSubdivisionCodeList: [],
        consigneeProvinceCode: "",
        consigneeCityCode: "",
        consigneeCountyCode: "",
        consigneeDetailAddress: "",
        consigneeName: "",
        consigneePhone: "",
        distance: 0
      },
      rules: {
        shipperSubdivisionCodeList: [
          { required: true, message: "请选择装货地址", trigger: "change" }
        ],
        consignorDetailAddress: [
          { required: true, message: "请输入装货详细地址", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ],
        consignorName: [
          { required: true, message: "请输入装货人姓名", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ],
        consignorPhone: [
          { required: true, message: "请输入装货人电话", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ],
        consigneeSubdivisionCodeList: [
          { required: true, message: "请选择收货地址", trigger: "change" }
        ],
        consigneeDetailAddress: [
          { required: true, message: "请输入收货详细地址", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ],
        consigneeName: [
          { required: true, message: "请输入收货人姓名", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ],
        consigneePhone: [
          { required: true, message: "请输入收货人电话", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    funcSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const rLoading = this.openLoading();
          addCommonRouteInfo(this.form)
            .then(response => {
              rLoading.close();
              this.$message({ message: response.msg, type: "success" });
              this.$emit("fatherAddMethod");
            })
            .then(() => this.$refs["form"].resetFields());
        } else {
          return false;
        }
      });
    },
    // 取消
    funcCancel() {
      this.$emit("fatherCancelMethod", "add");
    },
    changeConsigneeAreaList() {
      this.form.consigneeProvinceCode = this.form.consigneeSubdivisionCodeList[0];
      this.form.consigneeCityCode = this.form.consigneeSubdivisionCodeList[1];
      this.form.consigneeCountyCode = this.form.consigneeSubdivisionCodeList[2];
    },
    changeConsignorAreaList() {
      this.form.consignorProvinceCode = this.form.shipperSubdivisionCodeList[0];
      this.form.consignorCityCode = this.form.shipperSubdivisionCodeList[1];
      this.form.consignorCountyCode = this.form.shipperSubdivisionCodeList[2];
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-footer {
  margin: 15px 0 15px 0;
  width: 175px;
  float: right;
}
.el-cascader {
  width: 100%;
}
</style>
